[Ingest Pipelines] Processors editor a11y focus states #79122

jloleysens · 2020-10-01T14:01:26Z

Summary

Updated structure of HTML (removed unnecessary flex group and items)
Optimised keyboard focus states in move mode
Updated styling to better cater for overflow in certain cases

Addresses items 2 & 3 of #71666

Test

Pipeline JSON

{
  "processors": [
    {
      "grok": {
        "field": "my-field",
        "patterns": [
          "enter"
        ],
        "description": "test 2"
      }
    },
    {
      "grok": {
        "field": "test",
        "patterns": [
          "test",
          "test-again"
        ],
        "description": "test 1",
        "on_failure": [
          {
            "bytes": {
              "field": "test"
            }
          }
        ]
      }
    }
  ]
}

Navigate to create pipeline processor in Ingest pipelines plugin
Import processors from above
Tab to the move button of the inner "Bytes" processor
Use the keyboard navigation to either cancel the move (can be cancelled with esc key too) or place the processor somewhere else. Using spacebar+tab to interact with the buttons and drop zones.

Release note

Optimised keyboard navigation of the ingest processors component

Gif

Checklist

Delete any items that are not applicable to this PR.

This was checked for keyboard-only and screenreader accessibility

- fix use of flex items (removed unnecessary use thereof) - also fixed overflow when tabbing through drop zones (compressed)

elasticmachine · 2020-10-01T14:01:29Z

Pinging @elastic/es-ui (Team:Elasticsearch UI)

jloleysens · 2020-10-02T09:42:32Z

@elasticmachine merge upstream

alisonelizabeth

Changes LGTM. Thanks for making these improvements @jloleysens!

cchaos

Adding and removing tabindex properties from semantically both interact-able (button) and non-interact-able (div) elements seems like a big accessibility issue. Has this been tested with screen-readers?

jloleysens · 2020-10-02T14:56:01Z

Hi @cchaos ! In this issue #71666 @myasonik and I went through this component with a screen reader and identified this as something that we can optimise for navigating with keyboard.

This PR specifically addresses points 2 & 3 of that issue. Turning tabindex off for certain otherwise tabbable components enables faster traversal with a keyboard to the "drop zones".

Does this answer your question or was there a specific concern that I hadn't considered in the proposed changes?

cchaos

Thanks for the history and explanation! So long as there's been discussion and thought towards a11y 👍

myasonik · 2020-10-02T16:22:00Z

Hey, sorry to hold this up a touch, but I want to give this a pass through. Will try to get to it before end of day.

jloleysens · 2020-10-05T07:45:40Z

@elasticmachine merge upstream

kibanamachine · 2020-10-05T09:14:54Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 9c5c5f6

Metrics [docs]

async chunks size

id	before	after	diff
`ingestPipelines`	812.9KB	812.9KB	+4.0B

History

💛 Build #79085 was flaky a52b872
💚 Build #79084 succeeded a2edd47
💔 Build #78754 failed eb7d539

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

myasonik

👍 This doesn't fix all the a11y issues on the page but it does improve the state of things for keyboard users so it's best to merge

For a little more context on the screen reader front, a lot of problems on the page stem from using react-virtualized so the situation won't really be improved there until we can swap to using react-window

* Fix showing of accessibility border - fix use of flex items (removed unnecessary use thereof) - also fixed overflow when tabbing through drop zones (compressed) * refactor isLast to compressed * optimize keyboard focus states in move mode * fix jest test Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

…nes/fix-description-field * 'master' of github.com:elastic/kibana: A11y tests for user page (elastic#79199) [Ingest Pipelines] Processors editor a11y focus states (elastic#79122) [Ingest pipelines] Clean up component integration tests (elastic#78838) Drilldowns in examples (elastic#75640) Storybook and Jest cleanup (elastic#79305) adds EQL sequence rule test (elastic#79287) PR template a11y checklist item improvement (elastic#79243) [Security Solution] Adding tests for dns pipeline in the endpoint package (elastic#79177) [ML] Only adjust the bounds of SMV if annotations are visible (elastic#79210) global search to ts refs (elastic#79446) [Index management] Update TemplateDeserialized interface (elastic#78913) [Telemetry] server fetcher check all collectors ready before sending (elastic#79398) [Mappings editor] Fix app crash when selecting "other" field type (elastic#79434) [`/api/stats`] Add documentation + small improvement (elastic#79330) [Discover] "View surrounding documents" encodes spaces in filters (elastic#79283) [Lens] refactor DimensionContainer and fix flyout bug (elastic#79277) # Conflicts: # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/pipeline_processors_editor_item/inline_text_input.tsx # x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/processors_tree/components/private_tree.tsx

* Fix showing of accessibility border - fix use of flex items (removed unnecessary use thereof) - also fixed overflow when tabbing through drop zones (compressed) * refactor isLast to compressed * optimize keyboard focus states in move mode * fix jest test Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

jloleysens added 3 commits October 1, 2020 15:32

Fix showing of accessibility border

f69442a

- fix use of flex items (removed unnecessary use thereof) - also fixed overflow when tabbing through drop zones (compressed)

refactor isLast to compressed

8cfa36e

optimize keyboard focus states in move mode

eb7d539

jloleysens added release_note:enhancement v8.0.0 Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more v7.10.0 Feature:Ingest Node Pipelines Ingest node pipelines management labels Oct 1, 2020

jloleysens requested a review from alisonelizabeth October 1, 2020 14:01

jloleysens requested review from a team as code owners October 1, 2020 14:01

fix jest test

a2edd47

Merge branch 'master' into ingest-pipelines/processors-editor-fix-focus

a52b872

jloleysens changed the title ~~[Ingest Pipelines] Processors editor focus states~~ [Ingest Pipelines] Processors editor a11y focus states Oct 2, 2020

alisonelizabeth approved these changes Oct 2, 2020

View reviewed changes

cchaos reviewed Oct 2, 2020

View reviewed changes

cchaos approved these changes Oct 2, 2020

View reviewed changes

myasonik self-requested a review October 2, 2020 16:21

Merge branch 'master' into ingest-pipelines/processors-editor-fix-focus

9c5c5f6

myasonik approved these changes Oct 5, 2020

View reviewed changes

jloleysens merged commit f6729dc into elastic:master Oct 5, 2020

jloleysens deleted the ingest-pipelines/processors-editor-fix-focus branch October 5, 2020 15:05

jloleysens mentioned this pull request Oct 5, 2020

[7.x] [Ingest Pipelines] Processors editor a11y focus states (#79122) #79481

Merged

jloleysens mentioned this pull request Oct 5, 2020

(Accessibility) Ingest Node Pipelines UI #71666

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Ingest Pipelines] Processors editor a11y focus states #79122

[Ingest Pipelines] Processors editor a11y focus states #79122

jloleysens commented Oct 1, 2020 •

edited

Loading

elasticmachine commented Oct 1, 2020

jloleysens commented Oct 2, 2020

alisonelizabeth left a comment

cchaos left a comment •

edited

Loading

jloleysens commented Oct 2, 2020

cchaos left a comment

myasonik commented Oct 2, 2020

jloleysens commented Oct 5, 2020

kibanamachine commented Oct 5, 2020

myasonik left a comment

[Ingest Pipelines] Processors editor a11y focus states #79122

[Ingest Pipelines] Processors editor a11y focus states #79122

Conversation

jloleysens commented Oct 1, 2020 • edited Loading

Summary

Test

Release note

Gif

Checklist

elasticmachine commented Oct 1, 2020

jloleysens commented Oct 2, 2020

alisonelizabeth left a comment

Choose a reason for hiding this comment

cchaos left a comment • edited Loading

Choose a reason for hiding this comment

jloleysens commented Oct 2, 2020

cchaos left a comment

Choose a reason for hiding this comment

myasonik commented Oct 2, 2020

jloleysens commented Oct 5, 2020

kibanamachine commented Oct 5, 2020

💚 Build Succeeded

Metrics [docs]

async chunks size

History

myasonik left a comment

Choose a reason for hiding this comment

jloleysens commented Oct 1, 2020 •

edited

Loading

cchaos left a comment •

edited

Loading